<template>
  <div class="bg-white">
    <el-page-header @back="back">
      <template slot="title">
        <span class="back">返回</span>
      </template>
      <template slot="content">
        <span class="back pr-4">{{ form.name }}</span>
      </template>
    </el-page-header>
    <div class="pa-10">
      <avue-form ref="form" v-model="form" :option="option" @submit="submit">
        <template slot="menuForm" slot-scope="{ size }">
          <el-button type="primary" :size="size" @click="$refs.form.submit()">提交</el-button>
          <!-- <el-button plain :size="size" @click="$refs.form.resetForm()">暂存</el-button> -->
          <el-button :size="size" @click="back">取消</el-button>
        </template>
      </avue-form>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { shareSave, requestTargetDetail, shareGet } from '@/api/chart/chart'
export default {
  name: 'ChartFormDetail',

  data() {
    return {
      loading: true,
      form: {},
      option: {
        detail: !!this.$route.query?.shareId,
        submitBtn: false,
        emptyBtn: false,
        menuPosition: 'left',
        menuLeft: false,
        group: [
          {
            label: '指标信息',
            arrow: false,
            prop: 'jbxx',
            column: [
              {
                label: '指标编码',
                prop: 'code',
                span: 12,
                // rules: [{ required: true, message: '请输入指标编码' }],
                disabled: true,
              },
              {
                label: '指标名称',
                prop: 'name',
                span: 12,
                // rules: [{ required: true, message: '请输入指标名称' }],
                disabled: true,
              },
              {
                label: '指标分类',
                prop: 'indexType',
                type: 'select',
                span: 12,
                // rules: [{ required: true, message: '请选择指标分类' }],
                dicUrl: '/api/sys/dict/list',
                props: {
                  label: 'dictValue',
                  value: 'dictValue',
                },
                dicMethod: 'post',
                dicQuery: {
                  dictTypeCode: 'martix_type',
                },
                disabled: true,
              },
              {
                label: '指标定义',
                prop: 'indexDefine',
                span: 12,
                // rules: [{ required: true, message: '请输入指标定义' }],
                disabled: true,
              },
              {
                label: '修订人',
                prop: 'reviser',
                type: 'select',
                span: 12,
                // rules: [{ required: true, message: '请选择修订人' }],
                disabled: true,
              },
              {
                label: '责任人',
                prop: 'director',
                type: 'select',
                span: 12,
                // rules: [{ required: true, message: '请选择责任人' }],
                dicUrl: '/api/user/userGrid/1/999',
                props: {
                  label: 'nickName',
                  value: 'userId',
                },
                dicMethod: 'post',
                dicFormatter: (res) => res.listObject,
                disabled: true,
              },
              {
                label: '分享对象',
                prop: 'ids',
                type: 'select',
                multiple: true,
                filterable: true,
                row: true,
                span: 24,
                rules: [{ required: true, message: '请选择分享对象' }],
                dicUrl: '/jtx/matrix/share/shareUserList',
                props: {
                  label: 'nick_name',
                  value: 'user_id',
                },
                dicQuery: {
                  matrixId: this.$route.params.id,
                },
                dicMethod: 'get',
                dicFormatter: (res) => {
                  console.log(res)
                  return res.filter((item) => item.status == '未分享')
                },
              },
              {
                label: '备注',
                prop: 'remark',
                type: 'textarea',
                maxLength: 300,
                showWordLimit: true,
                span: 24,
              },
            ],
          },
        ],
      },
      isEdit: false,
    }
  },
  computed: {
    ...mapGetters(['name']),
    isDetail() {
      return !!this.$route.query?.shareId
    },
  },
  created() {
    this.init()
  },
  methods: {
    async submit(_, done) {
      let { ids, remark } = this.form
      const res = await shareSave({ matrixId: this.$route.params.id, ids, remark })
      if (res.success) {
        this.$message.success('分享成功')
        this.$router.back()
      } else {
        this.$message.error(res.message)
      }
      done()
    },
    async init() {
      if (this.$route.params.id) {
        const res = await requestTargetDetail({ id: this.$route.params.id })
        if (res.success) {
          let { code, name, indexType, indexDefine, director } = res.data
          this.form = {
            ...this.form,
            code,
            name,
            indexType,
            indexDefine,
            director: Number(director),
            reviser: this.name,
          }
        } else {
          this.$message.error(res.message)
        }
      }
      if (this.$route.query.shareId) {
        const result = await shareGet({ id: this.$route.query.shareId })
        let { remark, userId } = result.data
        this.form = { ...this.form, remark, ids: userId }
        let item = this.option.group[0].column[6]
        this.$set(item, 'multiple', false)
      }
    },
    back() {
      this.$store.dispatch('tagsView/delView', this.$route).then(() => {
        this.$router.back()
      })
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-page-header {
  background-color: #ffff;
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
}
::v-deep .el-page-header__content {
  font-size: 16px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  color: #262626;
}
.bg-white {
  min-height: 100%;
}
.chart-form-detail {
  background: #fff;
}
</style>
